<template>
    <div class="page-content">
       <div class="tip"><i class="iconfont icon-shuoming"></i>该设置直接影响看课用户是否必须评价</div>
        <el-form ref="editRef" :label-width="98">
            <el-form-item label="是否必须评价" class="srt-el-input-item">
                <el-radio-group v-model="formData.configValue" class="ml-4" @change="changeRadio">
                    <el-radio label="1" size="large" class="srt-el-radio">是</el-radio>
                    <el-radio label="0" size="large" class="srt-el-radio">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const emit = defineEmits(['update-detail']);

const route = useRoute();


const loading = ref(false);

const props = defineProps({
    detail: {
        type: Object,
        default: () => {
            return {};
        }
    }
})

// 表单对象
const formData = ref({
    configKey: 'mooc_must_evaluate',
    configName: 'mooc_must_evaluate'
});

function changeRadio() {
    if (!(props.detail.state === 1 || props.detail.state === 3)) {
        let message = props.detail.publishState === 1 && props.detail.state === 4 ? '该慕课已发布，请取消发布后再操作' : '该慕课正在审核中，无法操作';
        G_dispatchEvent('toast', { message, type: 'error' });
        formData.value.configValue = formData.value.configValue === '1' ? '0' : '1';
        return;
    }
    loading.value = true;
    G_transmit('moocConfigSave', {
        data: {
            ...formData.value,
            moocId: route.params.moocId
        }
    })
    .then((res) => {
        G_dispatchEvent('toast', { message: '配置成功', type: 'success' })
    })
    .catch((_err) => {
        formData.value.configValue = formData.value.configValue === '1' ? '0' : '1';
        console.log(_err)
    }).finally(() => {
        loading.value = false;
    });
}

function getDetail() {
    loading.value = true;
    G_transmit('moocConfigList', {
        data: {
            moocId: route.params.moocId,
            configKey: formData.value.configKey // 评价
        }
    })
    .then((res) => {
        let list = res.data || [];
        list.length && list.forEach(item => {
            if(item.configKey === formData.value.configKey) {
                formData.value.configValue = item.configValue;
            }
        })
    })
    .catch((_err) => {
        console.log(_err)
    }).finally(() => {
        loading.value = false;
    });
}

onMounted(() => {
    getDetail();
})

</script>

<style lang="scss" scoped>
.page-content {
    background: #ffffff;
    padding: 20px 0px;
    border-radius: 4px;

    :deep(.el-form-item) {
        margin-bottom: 30px;
    }

    :deep(.el-form-item__label) {
        line-height: 40px;
        height: 40px;
        color: var(--srt-color-gray);
        margin-right: 8px;
    }

    .tip {
        font-size: 14px;
        color: #47698C;
        margin-bottom: 7px;
        background: #F1FAFF;
        border-radius: 4px;
        border: 1px solid #DBF2FF;
        padding: 10px 10px 11px;
    }
    .icon-shuoming {
        margin-right: 6px;
        color: #6FB4FF;
        transform: translateY(1px);
        display: inline-block;
    }
    :deep(.el-form) {
        padding-left: 10px;
    }
}

</style>